import React, { FC } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';
import './style.less';

interface CarouselIProps {
  carouselArr?: any[],
}

export const Carousel:FC<CarouselIProps> = (props) => {
  const { carouselArr } = props;
  return (
    <Swiper
      // spaceBetween={50}
      // slidesPerView={}
      onSlideChange={(e) => console.log('slide change')}
      onSwiper={(swiper) => console.log('swiper')}
    >
      {
        carouselArr && carouselArr.length && carouselArr.map(item => {
        return <SwiperSlide key={item.id}>
          <img src={item.image_text} alt={item.name}/>
        </SwiperSlide>
        })
      }
    </Swiper>
  );
}

Carousel.defaultProps = {
  carouselArr: [
    {
      title: 'slide 1',
      src: require('../../assets/banner1.png')
    },
    {
      title: 'slide 2',
      src: require('../../assets/banner1.png')
    },
    {
      title: 'slide 3',
      src: require('../../assets/banner1.png')
    },
    {
      title: 'slide 4',
      src: require('../../assets/banner1.png')
    }
  ]
}

export default Carousel;

// import { Carousel, WingBlank } from 'antd-mobile';

// export default class extends React.Component {
//   state = {
//     data: ['1', '2', '3'],
//     imgHeight: 176,
//   }
//   componentDidMount() {
//     // simulate img loading
//     setTimeout(() => {
//       this.setState({
//         data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
//       });
//     }, 100);
//   }
//   render() {
//     return (
//       <WingBlank>
//         <Carousel
//           autoplay={false}
//           infinite
//           beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
//           afterChange={index => console.log('slide to', index)}
//         >
//           {this.state.data.map(val => (
//             <a
//               key={val}
//               href="http://www.alipay.com"
//               style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
//             >
//               <img
//                 src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
//                 alt=""
//                 style={{ width: '100%', verticalAlign: 'top' }}
//                 onLoad={() => {
//                   // fire window resize event to change height
//                   window.dispatchEvent(new Event('resize'));
//                   this.setState({ imgHeight: 'auto' });
//                 }}
//               />
//             </a>
//           ))}
//         </Carousel>
//       </WingBlank>
//     );
//   }
// }